<template>
    <div>
        <!-- 头部导航 -->
        <el-header height="auto">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/Main/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>
                    <a>添加数据</a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>添加商品</el-breadcrumb-item>
            </el-breadcrumb>
            <el-dropdown placement="bottom">
                <span class="el-dropdown-link">
                    <img src="../../../assets/img/default.jpg" alt />
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="goToIndex">首页</el-dropdown-item>
                    <el-dropdown-item @click.native="LogOUt">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <!-- 表单内容 -->
        <main class="add-goods">
            <header>选择食品种类</header>
            <el-card shadow="hover">
                <el-form ref="form" :model="form" label-width="80px" class="addShop_Content">
                    <el-form-item label="食品种类">
                        <el-select width="100%" v-model="form.region" placeholder="请选择食品种类">
                            <el-option label="种类1" value="shanghai"></el-option>
                            <el-option label="种类2" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="食品种类">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="种类描述">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addGoodType">添加</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <header>添加食品</header>
            <el-card shadow="hover">
                <el-form ref="form" :model="form" label-width="80px" class="addShop_Content">
                    <el-form-item label="食品名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="食品活动">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="食品详情">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="上传图片">
                        <el-upload
                            class="avatar-uploader"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                        >
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="食品特点">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="营养"></el-checkbox>
                            <el-checkbox label="美味"></el-checkbox>
                            <el-checkbox label="多汁"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="食品规格">
                        <el-radio v-model="radio" label="1">单规格</el-radio>
                        <el-radio v-model="radio" label="2">多规格</el-radio>
                    </el-form-item>
                    <el-form-item label="包装费">
                        <el-input-number
                            v-model="packing"
                            @change="packingChange"
                            :min="1"
                            :max="10"
                            label="描述文字"
                        ></el-input-number>
                    </el-form-item>
                    <el-form-item label="价格">
                        <el-input-number
                            v-model="price"
                            @change="priceChange"
                            :min="1"
                            :max="10"
                            label="描述文字"
                        ></el-input-number>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addFood">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </main>
    </div>
</template>
<script src="./template.js"></script>
<style scoped>
.addShop_Content {
    padding-top: 20px;
    max-width: 518px;
    margin: 0 auto;
}
.el-form-item__label:before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
}
.el-card {
    margin-bottom: 20px;
}
.add-goods {
    max-width: 650px;
    padding: 20px 0;
    margin: 0 auto;
}
.add-goods header {
    text-align: center;
    padding-bottom: 10px;
}
</style>